Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implements "pause on hover" Toast feature & exposes onMouseEnter and onMouseLeave callback props #6844

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

RickKukiela
Copy link
Contributor

I understand you don't want feature PRs, however I did this before reading that so please consider this code change. This is not backwards breaking in any way and is simply a port of a feature that was added to PrimeReact two years ago. I used the commit from that project as a guide to make this change and took great care to ensure the change was clean, concise and matches the existing code style.

The issue that PR was accepted for was primefaces/primereact#3272

That being said, I didn't see any information in the README.md nor did I see a CONTRIBUTING.md file so I was not clear on how to set this up so I could test my code so be aware these changes have not been tested! The code change is, however, very simple and I see no reason why it would not work as intended. Either way, please do test and confirm before merging.

Description of changes:

  • Added onMouseEnter and onMouseLeave props to BaseToast.
  • Added definitions and doc comments for the new props to ToastProps interface in Toast.d.ts. As far as I can tell this should cause the API docs page to update to describe the new props (this was the only place in the codebase where text from other props' documentation page was present).
  • Updated ToastMessage.vue so that when a toast with a message.life value set is created, the current timestamp is logged in the component.
    • When the mouse enter/leave events are fired, the user defined callback (if set) is fired and our code is not run if the defaultPrevented property is set on the event object.
    • On mouse enter, the timer for the life-end callback is terminated and a new life-end time is calculated (and stored to the component) by subtracting the current timestamp from the previously sent life-end time.
    • On mouse leave, the code to start the life-end timer is ran again.
  • The previous code that started the timer was moved from the onMounted lifecylce hook to a callable method to achieve this. The new method now uses the original life value at the start, but uses the calculated life time left each time it's started after being paused.

Note:

All new timer start/stop programming is contingent on message.life being set, to ensure this change will not affect the behavior of "sticky" messages. This should support starting and stopping the timer on repeated mouse hovers without issue.

Result:

If a message is created with a life of 10 seconds (for example) and the user moves the mouse over the message after 5 seconds the life-end timer is terminated. No matter how long the mouse stays over the component it will remain visible. Upon removing the mouse from the component the life-end timer will be restarted with the remaining 5 seconds.

Copy link

vercel bot commented Nov 23, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments
Name Status Preview Updated (UTC)
primevue ⬜️ Ignored (Inspect) Visit Preview Nov 23, 2024 8:35am
primevue-v3 ⬜️ Ignored (Inspect) Visit Preview Nov 23, 2024 8:35am

@RickKukiela RickKukiela changed the title Implements "pause on hover" feature & exposes onMouseEnter and onMouseLeave callback props Implements "pause on hover" Toast feature & exposes onMouseEnter and onMouseLeave callback props Nov 23, 2024
@tugcekucukoglu tugcekucukoglu added this to the 4.3.0 milestone Nov 25, 2024
@tugcekucukoglu tugcekucukoglu added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Nov 25, 2024
@ZiadJ
Copy link

ZiadJ commented Dec 9, 2024

Is there any way to reset the timeout each time the mouse enters the toast instead of just resuming resuming it?

@RickKukiela
Copy link
Contributor Author

Is there any way to reset the timeout each time the mouse enters the toast instead of just resuming resuming it?

I did not bake in that option but it certainly could be augmented to include such an option.
@tugcekucukoglu Would me updating the commit for or this PR cause any issues? I can make this update if not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

3 participants